<template>
  切换路由：<router-link to="/test">Test</router-link>
  <div>{{counter}}</div>
  <div @click="addCounter">点击我可观察到变化：{{twiceTheCounter}}</div>
  <HelloWorld :msg="twiceTheCounter" :name="twiceTheCounter"></HelloWorld>
  userStore数据：
  {{userStore}}
  <button @click="userStore.setMessageAction('张三里斯')">更改store数据</button>
</template>

<script>
import HelloWorld from "@/components/HelloWorld";

import {
  ref,
  computed,
  onMounted,
  onRenderTracked,
  onErrorCaptured,
} from "vue";
export default {
  props: ["name", "age"],
  components: { HelloWorld },
  data(){
    return {
      
    }
  },
  setup(props, content) {
    const counter = ref(0);
    const twiceTheCounter = computed(() => counter.value * 2);

    onMounted(() => {
      console.log(props, content);
    });

    onRenderTracked((e) => {
      console.log(e);
    });

    onErrorCaptured((e) => {
      console.log(e);
    });

    const addCounter = () => {
      counter.value++;
    };

    return {
      counter,
      twiceTheCounter,
      addCounter,
    };
  },
};
</script>

<style>
</style>
